<template>
  <view class="goods-order-box">
    <goods-classify @choose-classify="chooseClassify" :classify="classifyList" :index="chooseIndex"></goods-classify>

    <view class="goods-order-content" v-for="(item, index) in goodsOrderList" :key="item.order_id">
      <!-- 订单状态 -->
      <view class="goods-order-content-statue">订单状态：{{ orderStatue(item.order_goods_statue) }}</view>
      <!-- 订单内容 -->
      <view class="goods-order-content-info">
        <image :src="item.order_goods_image" mode="scaleToFill" />
        <view class="goods-order-content-info-title">{{ item.order_goods_title }}</view>
        <view class="goods-order-content-info-price">
          <view class="goods-order-content-info-price-content">{{ item.order_price }}</view>
          <view class="goods-order-content-info-num">共{{ item.order_goods_num }}件</view>
        </view>
      </view>
      <!-- 其他操作 -->
      <view class="goods-order-content-operate">
        <view class="goods-order-content-operate-more"> 更多</view>
        <view style="display: flex; align-items: center;">
          <view class="goods-order-content-operate-item" @click="orderDel(index)">删除订单</view>
          <view class="goods-order-content-operate-item" @click="orderAgin">再次购买 </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script lang="ts" setup>
import GoodsClassify from "../../components/goodsClassify/GoodsClassify.vue"
import { onLoad, onReady, onShow, onHide, onUnload, onPageScroll, onShareAppMessage } from '@dcloudio/uni-app';
import { ref, computed } from 'vue';
import type { ChooseClassifyData, GoodsOrder } from "../../config/data/data"

//当前选中的模块
const classifyList = ref<string[]>(["全部订单", "待评价", "待收货", "待发货"])

//当前选中的模块
const chooseIndex = ref<number>();

//选中分类
const chooseClassify = (data: ChooseClassifyData) => {
  chooseIndex.value = undefined;
  console.log(data)
  goodsOrderList.value = []
  //订单列表数据
  goodsOrderList.value = [{
    order_id: "tu5ufhdx",
    order_price: 88.5,
    order_goods_image: "https://www.lyzhnb.top/wf/wf-.jpg",
    order_goods_title: "精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤",
    order_goods_statue: 2,
    order_goods_num: 2
  },
  {
    order_id: "zaddzg454ad",
    order_price: 88.5,
    order_goods_image: "https://www.lyzhnb.top/wf/wf-.jpg",
    order_goods_title: "精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤",
    order_goods_statue: 1,
    order_goods_num: 5
  },
  ]
};

//再次购买
const orderAgin = () => {
  uni.navigateTo({
    url: '/subpkg/goods_detail/goods_detail'
  })
}

//对订单的当前状态做转换
const orderStatue = (item: number) => {
  switch (item) {
    case -1: return "已取消";
    case 0: return "待发货";
    case 1: return "待收货";
    case 2: return "已完成";
  }
}

//订单数据列表
const goodsOrderList = ref<GoodsOrder[]>([]);

//删除订单
const orderDel = (index: number) => {
  uni.showModal({
    title: '您确定要删除该订单?',
    content: '温馨提示！删除后您将无法找回订单信息',
    cancelText: '取消', // 取消按钮的文字
    confirmText: '删除', // 确认按钮的文字
    success(res) {
      if (res.confirm) {
        goodsOrderList.value.splice(index, 1);
        uni.showToast({
          title: '删除成功',
          icon: 'none',
          duration: 1000,
          mask: true
        })
        // 在这里执行确认后的操作
      } else if (res.cancel) {
        uni.showToast({
          title: '取消删除',
          icon: 'none',
          duration: 1000,
          mask: true
        })
      }
    }
  })
}

// 页面周期函数--监听页面加载
onLoad((e) => {

  //获取点击跳转的模块下标
  let index = classifyList.value.findIndex(item => item === e.id)
  if (index != -1) {
    chooseIndex.value = index
  }

  //订单列表数据
  goodsOrderList.value = [
    {
      order_id: "tu5ufhdx",
      order_price: 88.5,
      order_goods_image: "https://www.lyzhnb.top/wf/wf-.jpg",
      order_goods_title: "精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤",
      order_goods_statue: 2,
      order_goods_num: 2
    },
    {
      order_id: "zaddzg4gsdad",
      order_price: 88.5,
      order_goods_image: "https://www.lyzhnb.top/wf/wf-.jpg",
      order_goods_title: "精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤",
      order_goods_statue: 1,
      order_goods_num: 3
    },
    {
      order_id: "zaddzg454ad",
      order_price: 88.5,
      order_goods_image: "https://www.lyzhnb.top/wf/wf-.jpg",
      order_goods_title: "精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤精美护肤",
      order_goods_statue: 1,
      order_goods_num: 5
    },
  ]

})
// 页面周期函数--监听页面初次渲染完成
onReady(() => {

});
// 页面周期函数--监听页面显示(not-nvue)
onShow(() => {

});
// 页面周期函数--监听页面隐藏
onHide(() => {

});
// 页面周期函数--监听页面卸载
onUnload(() => {

});
// 页面处理函数--监听用户下拉动作
// onPullDownRefresh() { uni.stopPullDownRefresh(); },
// 页面处理函数--监听用户上拉触底
// onReachBottom() {},
// 页面处理函数--监听页面滚动(not-nvue)
// onPageScroll(event) {},
// 页面处理函数--用户点击右上角分享
// onShareAppMessage(options) {},

</script>

<style scoped lang="scss">
.goods-order-box {
  padding: 20rpx;
  background-color: $uni-bg-color;

  .goods-order-content {
    padding: 10rpx 0;
    margin: 20rpx 0;
    background-color: $uni-box-color;

    .goods-order-content-operate {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;


      .goods-order-content-operate-more {
        font-size: 24rpx;
        padding: 5rpx 10rpx;
      }

      .goods-order-content-operate-item {
        width: fit-content;
        padding: 0 20rpx;
        height: 50rpx;
        border-radius: 25rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 25rpx;
        color: rgb(25, 24, 24);
        border: 1px solid rgb(147, 147, 147);
        margin-left: 15rpx;
        box-shadow: 0 0 20rpx rgba(168, 167, 167, 0.555);

        &:last-child {
          color: #fff;
          background-color: red;
          border: 1rpx solid transparent;
        }
      }
    }

    .goods-order-content-statue {
      text-align: right;
      font-size: 24rpx;
      color: $uni-bg-color-mask;
    }

    .goods-order-content-info {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .goods-order-content-info-price {
        flex: 1;

        .goods-order-content-info-price-content {
          font-weight: bolder;
          font-size: 30rpx;

          &::before {
            width: 5rpx;
            height: 5rpx;
            content: "￥";
            font-size: 24rpx;
          }
        }

        .goods-order-content-info-num {
          font-size: 25rpx;
          text-align: right;
        }
      }

      .goods-order-content-info-title {
        flex: 5;
        font-size: 26rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; //设置行数
        overflow: hidden; //超出隐藏
        margin: 0 15rpx;
        letter-spacing: 2rpx;
      }

      image {
        flex: 2;
        max-height: 160rpx;
        border-radius: 6rpx;
      }
    }
  }
}
</style>